<script setup>
import { computed, ref } from 'vue';
import { defineAsyncComponent } from "vue"

let modules = import.meta.glob('./examples/**/**/*.vue')

const props = defineProps({
    file: {
        type: String,
        required: true,
    },
    source: {
        type: String,
    }
})

const demo = computed(() => {

    const c = modules[`./examples/${props.file}.vue`]
    const comp = defineAsyncComponent(c)
    return comp;
})

const decoded = computed(() => {
    const code = decodeURIComponent(props.source)
    return code
})
const expand = ref(false)
function toggleExpand() {
    expand.value = !expand.value;
}
</script>
<template>
    <client-only>
        <div class="demo_container">
            <div class="demo_content">
                <component :is="demo" v-if="demo && file" v-bind="$attrs"></component>
            </div>
            <div class="demo_source" v-if="expand">
                <div v-html="decoded"></div>
            </div>
            <div class="expand_box" @click="toggleExpand">
                {{ expand ? "收起代码" : "查看代码" }}
            </div>
            <div class="hiden_content">
                <slot></slot>
            </div>
        </div>
    </client-only>
</template>
<style lang="scss" scoped>
$borderColor: #eaecef;
.demo_container {
    border: 1px solid $borderColor;
    margin: 0.85rem 0;
}

.demo_content {
    padding: 1.5rem;

}

.demo_source {
    border-top: 1px solid $borderColor;

    :deep(pre) {
        margin: 0;
        border-radius: 0;
    }
}

.expand_box {
    border-top: 1px solid $borderColor;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
}
.hiden_content {
    display: none;
}
</style>